<template>
  <div class="add-user">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-col :xl="5" :lg="11" :md="10" :sm="14" :xs="24">
        <el-form :model="addForm" :rules="rules" ref="form" label-width="90px" size="small">
            <el-form-item label="所属门店">
              <span>{{ addForm.store_name }}</span>
            </el-form-item>
            <el-form-item label="登录用户名" prop="username">
              <el-input placeholder="请使用手机号作为用户名" v-model.number="addForm.username" :maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="登录密码" prop="passwd">
              <el-input type="password" placeholder="设置登录密码最少6位哟~" v-model="addForm.passwd"></el-input>
            </el-form-item>
            <el-form-item label="店员姓名" prop="staff_name">
              <el-input placeholder="输入店员名字" v-model="addForm.staff_name"></el-input>
            </el-form-item>
            <el-form-item label="职位" prop="position">
              <el-select v-model.number="addForm.position">
                <el-option v-for="(item,index) in users" :key="index" :label="item.name" :value="item.value">{{ item.name }}</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="店员状态" prop="radio">
              <el-radio-group v-model="addForm.radio">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">离职</el-radio>
              </el-radio-group>
            </el-form-item>
        </el-form>
        <el-button type="primary fr" @click="submit">保存资料</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { addUserInit, addUserSubmit } from '@/api/shop'
import { validatePhone } from '@/utils/validate'

export default {
  name: 'addUser',
  components: {
    Breadcrumb
  },
  data() {
    const validaPhone = (relus, value, callback) => {
      if (!validatePhone(value)) {
        callback(new Error('手机号码格式错误哟~'))
      } else {
        callback()
      }
    }
    return {
      addForm: {
        id: '',
        store_name: '',
        username: '',
        passwd: '',
        staff_name: '',
        position: '',
        radio: 1
      },
      users: [
        {
          value: 1,
          name: '店长'
        },
        {
          value: 2,
          name: '店员'
        }
      ],
      names: [],
      options: [],
      rules: {
        store_name: [{ required: true, trigger: 'blur', message: '不能为空哟~' }],
        username: [{ required: true, trigger: 'blur', validator: validaPhone }],
        passwd: [{ required: true, trigger: 'blur', min: 6, message: '不能为空哟' }],
        staff_name: [{ required: true, trigger: 'blur', message: '不能为空哟~' }],
        position: [{ required: true, trigger: 'change', type: 'number', message: '必须选择一个哟~' }]
      },
      props: {
        label: 'name',
        value: 'code',
        children: 'city'
      }
    }
  },
  beforeCreate() {
    addUserInit(this.$route.query.store_id).then(response => {
      this.addForm.store_name = response.data.result.store_name
      this.addForm.id = response.data.result.id
    })
  },
  methods: {
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          addUserSubmit(this.addForm).then(response => {
            if (response.data.errorCode === 0) {
              this.$message.success(response.data.errorMsg)
              this.$refs['form'].resetFields()
              this.$router.go(-1)
            } else {
              this.$message.error(response.data.errorMsg)
            }
          })
        }
      })
    }
  }
}
</script>